<template>
<div>
   <V-CommonHeaderLeft>
     <div id="app">
    <el-row>
      <!-- 头部 -->
      <div class="header">
        <el-col :span="4" class="header-nav">
          <router-link to="/">首页&nbsp;&nbsp;/</router-link>
          <router-link to="/">营销&nbsp;&nbsp;/</router-link>
          <router-link to="/">商品预售&nbsp;&nbsp;/</router-link>
          <router-link to="/">预售详情</router-link>
        </el-col>
      </div>
    </el-row>
    <!-- 第二部分 -->
    <div class="contents">
      <div class="contents-header">
        <h3>促销详情</h3>
        <div class="copy">
          <!-- <img src="" alt=""> -->
          <span></span>
          <div>
            <router-link to="/marketingSaleCopy">复制新增</router-link>
          </div>
        </div>
      </div>
      <el-row class="contents-details">
        <el-col :span="2">
          <div class="contents-details-left">
            <p>促销标题</p>
            <p>促销时间</p>
            <p>发货时间</p>
            <p>客户类型</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="contents-details-center">
            <p>单品满赠</p>
            <p>2019-06-03 08:53 ~ 2019 06-03 08:57</p>
            <p>启用</p>
            <p>普通代理商、VIP代理商、一级经销商、二级经销商</p>
          </div>
        </el-col>
        <el-col :span="1" :offset="7">
          <img src class="rightImg">
        </el-col>
      </el-row>
      <div class="table">
        <el-row class="table-one">
          <el-col :span="1">序号</el-col>
          <el-col :span="2">规格图</el-col>
          <el-col :span="5">商品名称/商品编号</el-col>
          <el-col :span="5">规格名称/规格编号</el-col>
          <el-col :span="2">单位</el-col>
          <el-col :span="2">销售价</el-col>
           <el-col :span="2">预销售价</el-col>
          <el-col :span="2">起订量</el-col>
          <el-col :span="3">限订量</el-col>
        </el-row>
        <el-row class="table-two" v-for="(site,key) in data" :key="key">
          <el-col
            :span="1"
            class="xuhao"
          >{{++key}}</el-col>
          <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;"
          >{{site.url}}</el-col>
          <el-col
            :span="5"
            style="text-align:left;padding-left:10px;border-left:1px solid #e3e3e3;"
          >
            <span>{{site.goodsName}}</span>
            <span>{{site.goodsBian}}</span>
          </el-col>
          <el-col :span="5" style="border-left:1px solid #E3E3E3;">
            <span>{{site.guiName}}</span>
            <span>{{site.guiBian}}</span>
          </el-col>
          <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;"
          >{{site.dan}}</el-col>
          <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;"
          >￥{{site.price}}</el-col>
           <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;"
          >￥{{site.yuPrice}}</el-col>
          <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;"
          >{{site.count}}</el-col>
           <el-col
            :span="3"
            style="border-left:1px solid #E3E3E3;"
          >{{site.yuCount}}</el-col>
        </el-row>
      </div>
    </div>
  </div>
   </V-CommonHeaderLeft>
</div>
</template>

<script>
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      data: [
        {
          url: '图片地址',
          goodsName: '现在沙发北欧风格沙发',
          goodsBian: '2645896+65',
          guiName: '100*100*240',
          guiBian: 'CSA-4506-A2',
          dan: '张',
          price: 5520,
          yuPrice: 6000,
          count: 10,
          yuCount: 20
        },
        {
          url: '图片地址',
          goodsName: '现在沙发北欧风格沙发',
          goodsBian: '2645896+65',
          guiName: '100*100*240',
          guiBian: 'CSA-4506-A2',
          dan: '张',
          price: 5520,
          yuPrice: 6000,
          count: 10,
          yuCount: 20
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width:100%;
  background-color: #f2f5f7;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .header-img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(4) {
  color: #333;
}
.header-nav a:nth-child(4):hover {
  color: #333;
}
.contents {
  margin: 0px 10px;
  background-color: #fff;
  height:520px
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 45px 0px 25px;
}
.contents-header > h3 {
  color: #20ade5;
  font-size: 16px;
  letter-spacing: 1px;
  border-bottom: 2px solid #20ade5;
  width: 110px;
  padding-bottom: 15px;
  text-align: center;
}
.copy {
  display: flex;
}
.copy span:nth-child(1) {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #20ade5;
  border-radius: 50%;
  margin-top: 3px;
}
.copy > div > a {
  color: #20ade5;
  margin-left: 5px;
}
.contents-details {
  padding: 30px 0px 0px 25px;
  font-size: 14px;
  color: #666666;
}
.contents-details-left {
}
.contents-details-left > p {
  line-height: 35px;
}
.contents-details-center {
  line-height: 35px;
}
.contents-details-center > p:nth-child(4) span:nth-child(1) {
  width: 35px;
  height: 20px;
  background-color: #ff3838;
  color: #fff;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
  margin-right: 5px;
}
.contents-details-center > p:nth-child(4) span:nth-child(4) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(4) span:nth-child(4):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:nth-child(4) span:nth-child(7) {
  color: #20ade5;
}
.contents-details-center > p:nth-child(4) span:nth-child(8) {
  width: 100px;
  border-bottom: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
  line-height: 20px;
}
.contents-details-center > p:nth-child(4) span:nth-child(8):hover {
  border-bottom: 1px solid #20ade5;
}
.contents-details-center > p:last-child {
  color: #333;
}
.rightImg {
  width: 105px;
  height: 105px;
  border: 1px solid;
  border-radius: 50%;
  margin-top: 20px;
}
.table {
  width: 90%;
  color: #666;
  font-size: 12px;
  border-right:1px solid #e3e3e3;
  margin: 15px 0px 0px 25px;
  border-bottom:1px solid #e3e3e3
}
.table-one {
  height: 50px;
  background-color: #fcfcfc;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
}
.table-two {
   height: 80px;
  line-height: 80px;
  text-align: center;
  border-top: 1px solid #e3e3e3;
  // border-bottom: 1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
}
.xuhao {
}
</style>
